import React, {useEffect} from "react";
// import L from 'leaflet/index'

const domId = 'map_dom';

const L = window.L;
interface GlobalHeaderRightProps {
  showMap?:boolean;
}

export const MapContent: React.FC<GlobalHeaderRightProps> = ({showMap}) => {
  let zIndex = 1;
  let display = 'block';
  if(!showMap){
    zIndex = -100;
    display='none'
  }

  // const size = useSize(document.querySelector('body'));
  useEffect(() => {
    var map = L.map(domId).setView([113.505, 29], 13);

    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(map);

  }, []);

  return (
    <div style={{display,position:'absolute',bottom:"0px",left:'0px',right:'0px',top:'64px',}}>
      <div id={domId} style={{display,width:'100%',height:'100%',}}/>
    </div>
  )
};
